<template>
  <div class="box">
    <div class="box-title">湿度卡信息</div>
    <div
      class="box-table"
      :style="{ height: (tableData.length + 1) * 40 + 'px' }"
    >
      <hcTable
        :table-data="tableData"
        :options="tableOptions"
        :columns="tableColumn"
      >
        <template #position="{ row }">
          {{ row.position == "0" ? "正面" : "反面" }}
        </template>
      </hcTable>
    </div>
  </div>
</template>
<script setup>
defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
});

let tableOptions = {
  showPagination: false,
  border: true,
};

let tableColumn = [
  { label: "料号", prop: "code" },
  // { label: "物料描述", prop: "description", },
  // { label: "长度", prop: "length" },
  // { label: "宽度", prop: "width" },
  { label: "放置位置", prop: "position", slot: "position" },
  { label: "坐标X", prop: "x" },
  { label: "坐标Y", prop: "y" },
  { label: "旋转角度", prop: "angle" },
  { label: "湿度卡类型", prop: "humidityType" },
  { label: "颜色", prop: "humidityColor" },
  { label: "色高", prop: "humidityColorHeight" },
];
</script>
<style scoped lang="scss">
.box {
  width: 100%;
  .box-title {
    height: 30px;
    line-height: 30px;
    width: 100%;
    text-align: center;
  }
  .box-table {
    display: flex;
    height: 100%;
    font-size: 14px;
  }
}
</style>
